import { useSkin } from '@hooks/useSkin'
import moment from 'moment'
import React, { useEffect } from 'react'
import { ChevronLeft } from 'react-feather'
import { useDispatch, useSelector } from 'react-redux'
import { useLocation, useNavigate } from 'react-router-dom'
import { Badge, Card, CardBody, CardHeader, CardTitle } from 'reactstrap'
import InvoiceSlip from '../../../components/Billing/invoice/InvoiceSlip'
import { getMyProviderAction } from '../../../redux/myProvider/myProviderAction'
import { getStatus } from '../../../utility/Utils'

const index = () => {
  const { skin } = useSkin()
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const { state } = useLocation()

  const { getMyProvider } = useSelector((state) => state.provider)
  useEffect(() => {
    dispatch(getMyProviderAction())
  }, [])
  return (
    <div>
      <Card className="p-0">
        <CardHeader>
          <CardTitle>
            <ChevronLeft
              color={skin === 'light' ? '#783e34' : '#efefef'}
              size={24}
              className="me-1 pointer"
              onClick={() => navigate(-1)}
            />
            <span className="black pl-10px">Invoice</span>
            <span className="fw-bold black pl-5px">
              {state?.created_at !== null ? moment.unix(state?.created_at).format('MM/DD/YYYY') : '--'}
            </span>
          </CardTitle>
          <CardTitle className='sm-screen-ml-auto'>
            <Badge
              pill
              className={`${
                getStatus(state?.status)?.class
              } padding-billing-badge`}
            >
              {getStatus(state?.status)?.status}
            </Badge>
          </CardTitle>
        </CardHeader>
        <CardBody className="card-body-styling mx-2">
          <InvoiceSlip state={state} getMyProvider={getMyProvider} />
        </CardBody>
      </Card>
    </div>
  )
}

export default index
